<template>
  <button
    type="button"
    role="switch"
    :aria-checked="checked"
    :data-state="checked ? 'checked' : 'unchecked'"
    :value="checked ? 'on' : 'off'"
    :class="cn(
      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
      checked ? 'bg-primary' : 'bg-input',
      $attrs.class
    )"
    @click="toggle"
    v-bind="$attrs"
  >
    <span
      :data-state="checked ? 'checked' : 'unchecked'"
      :class="cn(
        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform',
        checked ? 'translate-x-5' : 'translate-x-0'
      )"
    />
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/lib/utils'

interface SwitchProps {
  checked?: boolean
  defaultChecked?: boolean
  disabled?: boolean
}

const props = withDefaults(defineProps<SwitchProps>(), {
  checked: false,
  defaultChecked: false,
  disabled: false
})

const emit = defineEmits<{
  'update:checked': [value: boolean]
}>()

const checked = computed({
  get: () => props.checked,
  set: (value) => emit('update:checked', value)
})

const toggle = () => {
  if (!props.disabled) {
    checked.value = !checked.value
  }
}
</script>